<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>社团列表</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="/layui/css/layui.css"  media="all">
	<link rel="stylesheet" href="/css/public.css" media="all" />
	<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>

<script src="/layui/layui.js" charset="utf-8"></script>
<script src="/js/common/jquery-3.4.1.js"></script>
<!--添加的form页面 start-->
<form class="layui-form" id="addForm" lay-filter="updateFormFilter" style="display: none;padding: 20px 20px 0 0 ">

	<div class="layui-form-item">
		<label class="layui-form-label">社团编号</label>
		<div class="layui-input-inline">
			<input type="text" name="a_id"  required  lay-verify="required" placeholder="请输入社团名称" autocomplete="off" class="layui-input">
		</div>
	</div>

	<div class="layui-form-item">
		<label class="layui-form-label">社团名称</label>
		<div class="layui-input-inline">
			<input type="text" name="a_name"  required  lay-verify="required" placeholder="请输入社团名称" autocomplete="off" class="layui-input">
		</div>
	</div>

	<div class="layui-form-item">
		<label class="layui-form-label">活动名称</label>
		<div class="layui-input-inline">
			<input type="text" name="ac_name"  required  lay-verify="required" placeholder="请输入社团名称" autocomplete="off" class="layui-input">
		</div>
	</div>

	<div class="layui-form-item">
		<label class="layui-form-label">内容</label>
		<div class="layui-input-inline">
			<input type="text" name="content"  required lay-verify="required" placeholder="请输入社长学号" autocomplete="off" class="layui-input">
		</div>
	</div>

	<div class="layui-form-item">
		<label class="layui-form-label">地点</label>
		<div class="layui-input-inline">
			<input type="text" name="place"  required lay-verify="required" placeholder="请输入社长学号" autocomplete="off" class="layui-input">
		</div>
	</div>

	<div class="layui-form-item">
		<label class="layui-form-label">图片</label>
		<div class="layui-input-inline">
			<button type="button" class="layui-btn" id="addUpload">
				<i class="layui-icon">&#xe67c;</i>上传图片
			</button>
			<input type="hidden" name="ac_url" id="ac_url"><!--隐藏的输入框 用来接收成功响应的文件名,方便提交-->
		</div>
	</div>

	<div class="layui-form-item">
		<label class="layui-form-label">开始时间</label>
		<div class="layui-input-inline">
			<input type="text" name="ac_starttime" id="ac_starttime1" readonly="readonly" required lay-verify="required"  autocomplete="off" class="layui-input">
		</div>
	</div>

	<div class="layui-form-item">
		<label class="layui-form-label">结束时间</label>
		<div class="layui-input-inline">
			<input type="text" name="ac_endtime" id="ac_endtime1" readonly="readonly" required lay-verify="required"  autocomplete="off" class="layui-input">
		</div>
	</div>


	<div class="layui-form-item" >
		<label class="layui-form-label">状态</label>
		<div class="layui-input-block">
			<input type="radio" name="ac_examine" value="1" title="等待审核" checked />
			<input type="radio" name="ac_examine" value="0" title="审核通过"  />
			<input type="radio" name="ac_examine" value="2" title="正在进行"  />
			<input type="radio" name="ac_examine" value="3" title="已经结束"  />

		</div>
	</div>



	<div class="layui-form-item">
		<div class="layui-input-block">
			<button class="layui-btn" lay-submit lay-filter="update">立即提交</button>
			<button type="reset" class="layui-btn layui-btn-primary">重置</button>
		</div>
	</div>
</form>
<!--添加的form页面 end-->

<!--修改的form页面 start-->
<form class="layui-form" id="updateForm" lay-filter="updateFormFilter" style="display: none;padding: 20px 20px 0 0 ">

	<div class="layui-form-item">
		<label class="layui-form-label">社团编号</label>
		<div class="layui-input-inline">
			<input type="text" name="a_id"  required  lay-verify="required" placeholder="请输入社团名称" autocomplete="off" class="layui-input">
		</div>
	</div>

	<div class="layui-form-item">
		<label class="layui-form-label">社团名称</label>
		<div class="layui-input-inline">
			<input type="text" name="a_name"  required  lay-verify="required" placeholder="请输入社团名称" autocomplete="off" class="layui-input">
		</div>
	</div>

	<div class="layui-form-item">
		<label class="layui-form-label">活动名称</label>
		<div class="layui-input-inline">
			<input type="text" name="ac_name"  required  lay-verify="required" placeholder="请输入社团名称" autocomplete="off" class="layui-input">
		</div>
	</div>

	<div class="layui-form-item">
		<label class="layui-form-label">内容</label>
		<div class="layui-input-inline">
			<input type="text" name="content"  required lay-verify="required" placeholder="请输入社长学号" autocomplete="off" class="layui-input">
		</div>
	</div>

	<div class="layui-form-item">
		<label class="layui-form-label">地点</label>
		<div class="layui-input-inline">
			<input type="text" name="place"  required lay-verify="required" placeholder="请输入社长学号" autocomplete="off" class="layui-input">
		</div>
	</div>

	<div class="layui-form-item">
		<label class="layui-form-label">图片</label>
		<div class="layui-input-inline">
			<button type="button" class="layui-btn" id="addUpload1">
				<i class="layui-icon">&#xe67c;</i>上传图片
			</button>
			<input type="hidden" name="ac_url" id="ac_url1"><!--隐藏的输入框 用来接收成功响应的文件名,方便提交-->
		</div>
	</div>

	<div class="layui-form-item">
		<label class="layui-form-label">开始时间</label>
		<div class="layui-input-inline">
			<input type="text" name="ac_starttime" id="ac_starttime" readonly="readonly" required lay-verify="required"  autocomplete="off" class="layui-input">
		</div>
	</div>

	<div class="layui-form-item">
		<label class="layui-form-label">结束时间</label>
		<div class="layui-input-inline">
			<input type="text" name="ac_endtime" id="ac_endtime" readonly="readonly" required lay-verify="required"  autocomplete="off" class="layui-input">
		</div>
	</div>


	<div class="layui-form-item" >
		<label class="layui-form-label">状态</label>
		<div class="layui-input-block">
			<input type="radio" name="ac_examine" value="1" title="等待审核" checked />
			<input type="radio" name="ac_examine" value="0" title="审核通过"  />
			<input type="radio" name="ac_examine" value="2" title="正在进行"  />
			<input type="radio" name="ac_examine" value="3" title="已经结束"  />

		</div>
	</div>



	<div class="layui-form-item">
		<div class="layui-input-block">
			<button class="layui-btn" lay-submit lay-filter="update">立即提交</button>
			<button type="reset" class="layui-btn layui-btn-primary">重置</button>
		</div>
	</div>
</form>
<!--修改的form页面 end-->

<form class="layui-form">
	<blockquote class="layui-elem-quote quoteBox">
		<div class="layui-inline">
			<div class="layui-input-inline">
				<input type="text" class="layui-input searchVal" id="sercha_name" placeholder="请输入搜索的内容" />
			</div>
			<a class="layui-btn search_btn" data-type="reload" id="search">活动名称搜索</a>
		</div>

		<div class="layui-inline">
			<a class="layui-btn layui-btn-danger layui-btn-normal delAll_btn">批量删除</a>
		</div>
		<div class="layui-inline">
			<a class="layui-btn" id="addCommunity">添加活动</a>
		</div>
	</blockquote>
</form>
<!--<button class="layui-btn" id="addCommunity">添加社团</button>-->
<table class="layui-hide" id="activityList" lay-filter="myTableFilter"></table>
<script>
	layui.use(['table','layer','form','laydate','upload'], function(){
		var table = layui.table;
		var layer = layui.layer;
		var form = layui.form;
		var laydate = layui.laydate;
		var upload = layui.upload;
		//addForm表单的创建时间--start
		laydate.render({
			elem: '#ac_starttime',
			value: new Date() ,
			done: function(value, date){}
		});
		laydate.render({
			elem: '#ac_endtime',
			value: new Date() ,
			done: function(value, date){}
		});
		//addForm表单的创建时间--end

		//updateForm表单的创建时间--start
		laydate.render({
			elem: '#ac_starttime1',
			value: new Date() ,
			done: function(value, date){}
		});
		laydate.render({
			elem: '#ac_endtime1',
			value: new Date() ,
			done: function(value, date){}
		});
		//updateForm表单的创建时间--end

		// updateForm表单的文件上传--start
		upload.render({
			elem:'#addUpload1',
			url:'/u/ai/upload',
			// filed:'file',				//默认是file
			// auto:false,		//文件不会直接上传完图片之后自动上传
			// bindAction:'#addSubmit',	//绑定一个按钮，将点击按钮时上传图片
			done:function (res) {	//上传成功之后执行
				console.log(res);
				//将上传成功响应的文件名放置在隐藏的输入框a_url中，方便待会添加时提交数据
				$("#a_url1").val(res.src);
				console.log();
			}
		});

		//updateForm表单的文件上传--end


		//    --点击添加社团按钮 展示添加的弹出层 start--
		$("#addCommunity").click(function () {
			layer.open({
				type:1,     //弹出层类型
				title:'添加社团',
				area:'500px',   //宽度
				content:$("#addForm") //内容
			})
		})
		//    --点击添加社团按钮 展示添加的弹出层 end--

		//--添加功能--start
		//思路：1.给添加页面的添加按钮绑定表单提交事件  2.发送ajax请求，执行操作
		// 3.根据响应结果实现局部刷新（3.1隐藏弹出层  3.2 清空添加界面输入框数据 3.3 提示添加成功 3.4 表格重载）
		form.on('submit(add)',function (date) {

			$.ajax({
				url:'/u/ai/insert',
				data:$("#addForm").serialize(), //获取添加社团的请求参数
				dataType:'json',
				method:'post',
				success:function (result) {
					if(result.flag){
						layer.closeAll();       //关闭添加的界面弹出层
						$("#addForm")[0].reset();   //使用js中的reset方法情况表单数据
						layer.msg("添加成功");
						table.reload('communityList')
					}
					else {
						alert(result.msg);
					}},
				error:function (data) {

				}

			});

			return false;   // 页面不需要提交
		});
		//--添加功能--end

		//--给操作列绑定事件 start--
		table.on('tool(myTableFilter)',function (obj) {
			//obj.event可以获取被点击按钮lay-event的属性值
			//obj.data可以获取当前行对应的json对象
			// 例如a_id: 1 a_name: "楚衿汉文化协会" a_url: "cj" creationtime: "2018-06-01" examine: 0 number: "130" username: "201801070430" __proto__: Object
			if(obj.event == 'edit'){
				//弹出一个页面框架，里面包含一个修改界面
				layer.open({
					type:1,
					title:'修改社团信息',
					area:'500px',
					content:$("#updateForm")
				})

				$.ajax({
					url:'/u/ai/selectOne',
					data:'a_id='+obj.data.a_id,
					dataType:'json',
					method:'post',
					success:function (result) {
						//修改界面回显数据
						form.val('updateFormFilter',{
							a_name:result.a_name,
							username:result.username,
							creationtime:result.creationtime,
							a_url:result.a_url,
							examine:result.examine
						})
					}
				})

			}else if(obj.event == 'del'){
				//询问用户是否确定删除
				layer.confirm('确定要删除吗',function (index) {
					//若点击确定，会执行function中的代码
					//点击确定，获取当前行的a_id编号，发送ajax请求
					console.log(obj.data.a_id);
					$.ajax({
						url:'u/ai/delete',
						data:'a_id= '+obj.data.a_id,
						dataType:'json',
						method:'post',
						success:function (result) {
							if(result.flag) {
								layer.msg('删除成功');
								table.reload('communityList');
							}
						}

					})
					//关闭询问框
					layer.close(index);
				})


			}
		})
		//--给操作列绑定事件 end--





		//渲染（初始化）表格 start
		table.render({
			elem: '#activityList'
			,url:'/u/ai/selectActivityALL'
			,limit:2   //每页显示的记录数量
			,limits:[2,5,8,10,15,20]  //可选择每页显示的数量
			,cellMinWidth : 95
			,page : true
			// ,height : 321
			// ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
			,method:'post'
			,cols: [
				[
					{type: "checkbox", fixed:"left", width:50},
					{field: 'ac_id', title: '活动编号', align:"center"},
					{field: 'a_id', title: '社团编号',  align:"center"},
					{field: 'ac_name', title: '活动名称', width:100},
					{field: 'content', title: '内容', width:200, align:'center'},
					{field: 'place', title: '地点', align:'center'},
					{field: 'ac_url', title: '照片', align:'center',width:200},
					{field: 'ac_starttime', title: '开始时间', align:'center',width:200,templet:function(d){
							return d.ac_starttime.substring(0,10);}},
					{field: 'ac_endtime', title: '结束时间', align:'center',width:200,templet:function(d){
							return d.ac_endtime.substring(0,10);}},
					// {field: 'spend', title: '活动开销', align:'center'},
					{field: 'ac_examine', title: '状态', align:'center',templet:"#ac_examine"},
					,{fixed:'right',title:'操作',width: '150',align:'center',templet:'#barDemo'}

				]
			]
		});
		//渲染（初始化）表格 end

		//给搜索按钮绑定点击事件 --start
		$("#search").click(function () {
			//调用table表格中的reload方法,表格重载
			table.reload('communityList',{
				where:{
					a_name: $("#sercha_name").val()  //获取输入框的值
				}
			})
		})
		//给搜索按钮绑定点击事件 --end

		//--修改功能 --start--
		form.on('submit(update)',function () {
			$.ajax({
				url:'',
				data:$("#updateForm").serialize(),
				dataType:'json',
				method:'post',
				success:function (result) {
					if (result.flag){
						//隐藏修改弹出层
						layer.closeAll();
						//提示修改成功
						layer.msg('修改成功');
						//表格重载
						table.reload('communityList');

					}
				}
			})
			return false;
		})
		//--修改功能 --end--

	});

</script>
<!--自定义列模板 start-->
<script type="text/html" id="ac_examine">
	{{#  if(d.ac_examine == "1"){ }}
	<span style="color: #FF5722">等待审核</span>

	{{#  } else { }}
	审核通过
	{{#  }}}
</script>
<!--自定义列模板 end-->
<script type="text/html" id="barDemo">
	<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
	<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>

</script>



</body>
</html>